<template>
  <el-header class="header">
    <div class="l-content">
      <el-button size="small" @click="isCollapseHandler">
        <el-icon :size="20">
          <Grid />
        </el-icon>
      </el-button>
      <el-breadcrumb separator="/" class="board">
        <el-breadcrumb-item :to="{ path: '/' }" class="bread">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="currentBread.path" v-if="currentBread">
          {{ currentBread?.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="/public/vite.svg" alt="">
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import useStore from '../store/index.js';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const store = useStore();
const router = useRouter()
const isCollapseHandler = () => {
  store.updateIsCollapse();
}
const currentBread = computed(() => {
  return store.bread
});
const loginOut = () => {
  store.clearMenu();
  store.clearToken();
  router.push('/login')
}




</script>

<style lang='scss' scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: black;
  color: white;
}

.l-content {
  display: flex;
  align-items: center;
}

.bread {
  margin-left: 20px;
}

.board :deep(.el-breadcrumb__inner) {
  color: #fff !important;

}
</style>